<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Client 客户端示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>SSE Client 客户端示例</h1>
        
        <!-- 服务器连接部分 -->
        <div class="section">
            <div class="section-title">服务器连接 (SSE)</div>
            <div class="input-group">
                <label for="serverUrl">服务器 URL:</label>
                <input type="text" id="serverUrl" value="http://localhost:8081/sse" placeholder="输入 MCP 服务器地址">
            </div>
            <div class="button-group">
                <button id="connectBtn" class="btn-success">连接服务器 (SSE)</button>
                <button id="disconnectBtn" class="btn-danger" disabled>断开连接</button>
                <button id="terminateSessionBtn" class="btn-warning" disabled>终止会话</button>
            </div>
        </div>
        
        <!-- 会话信息 -->
        <div class="session-info">
            <div>会话 ID: <span id="sessionId">未连接</span></div>
            <div>重连令牌: <span id="resumptionToken">无</span></div>
            <div>连接状态: <span id="connectionStatus">未连接</span></div>
            <div>服务器信息: <span id="serverInfo">无</span></div>
        </div>
        
        <!-- 客户端能力 -->
        <div class="section capabilities-section">
            <div class="section-title">客户端能力 (连接前设置)</div>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-title">日志功能</div>
                    <input type="checkbox" id="capabilityLogs" checked> 启用日志功能
                </div>
                <div class="feature-card">
                    <div class="feature-title">提示词功能</div>
                    <input type="checkbox" id="capabilityPrompts" checked> 启用提示词功能
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源功能</div>
                    <input type="checkbox" id="capabilityResources" checked> 启用资源功能
                </div>
                <div class="feature-card">
                    <div class="feature-title">工具调用</div>
                    <input type="checkbox" id="capabilityTools" checked> 启用工具调用
                </div>
                <div class="feature-card">
                    <div class="feature-title">补全功能</div>
                    <input type="checkbox" id="capabilityCompletions" checked> 启用补全功能
                </div>
            </div>
        </div>
        
        <!-- 高级API操作 -->
        <div class="section api-section">
            <div class="section-title">Client API 操作</div>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-title">测试连接</div>
                    <button id="pingBtn" class="btn-info" disabled>测试连接 (ping)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">列出工具</div>
                    <button id="listToolsBtn" class="btn-info" disabled>列出工具 (listTools)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">调用工具</div>
                    <button id="callToolBtn" class="btn-info" disabled>调用工具 (callTool)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">补全功能</div>
                    <button id="completeBtn" class="btn-info" disabled>文本补全 (complete)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">日志级别</div>
                    <button id="setLoggingLevelBtn" class="btn-info" disabled>设置日志级别 (setLoggingLevel)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">提示词管理</div>
                    <button id="listPromptsBtn" class="btn-info" disabled>列出提示词 (listPrompts)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">提示词管理</div>
                    <button id="getPromptBtn" class="btn-info" disabled>获取提示词 (getPrompt)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源管理</div>
                    <button id="listResourcesBtn" class="btn-info" disabled>列出资源 (listResources)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源管理</div>
                    <button id="readResourceBtn" class="btn-info" disabled>读取资源 (readResource)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源管理</div>
                    <button id="listResourceTemplatesBtn" class="btn-info" disabled>列出资源模板 (listResourceTemplates)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源订阅</div>
                    <button id="subscribeResourceBtn" class="btn-info" disabled>订阅资源 (subscribeResource)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">资源订阅</div>
                    <button id="unsubscribeResourceBtn" class="btn-info" disabled>取消订阅 (unsubscribeResource)</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">获取服务器信息</div>
                    <button id="getServerInfoBtn" class="btn-info" disabled>获取服务器信息</button>
                </div>
                <div class="feature-card">
                    <div class="feature-title">发送自定义请求</div>
                    <button id="customRequestBtn" class="btn-info" disabled>发送自定义请求</button>
                </div>
            </div>
        </div>
        
        <!-- 自定义请求 -->
        <div class="section">
            <div class="section-title">自定义请求</div>
            <div class="input-group">
                <label for="requestMethod">请求方法:</label>
                <select id="requestMethod">
                    <option value="ping">ping</option>
                    <option value="completion/complete">completion/complete</option>
                    <option value="logging/setLevel">logging/setLevel</option>
                    <option value="prompts/get">prompts/get</option>
                    <option value="prompts/list">prompts/list</option>
                    <option value="resources/list">resources/list</option>
                    <option value="resources/templates/list">resources/templates/list</option>
                    <option value="resources/read">resources/read</option>
                    <option value="resources/subscribe">resources/subscribe</option>
                    <option value="resources/unsubscribe">resources/unsubscribe</option>
                    <option value="tools/call">tools/call</option>
                    <option value="tools/list">tools/list</option>
                </select>
            </div>
            <div class="input-group">
                <label for="requestParams">请求参数 (JSON 格式):</label>
                <textarea id="requestParams">{"prompt": "Hello, world!"}</textarea>
            </div>
            <div class="button-group">
                <button id="sendRequestBtn" class="btn-primary" disabled>发送请求</button>
            </div>
        </div>
        
        <!-- 请求结果 -->
        <div class="section result-section">
            <div class="section-title">请求结果</div>
            <div class="input-group">
                <textarea id="requestResult" readonly placeholder="请求结果将显示在这里..."></textarea>
            </div>
        </div>
        
        <!-- 日志输出 -->
        <div class="section">
            <div class="section-title">日志输出</div>
            <div class="logs" id="logs">
                <!-- 日志输出将在这里显示 -->
            </div>
        </div>
    </div>
    
    <script src="../../dist/client.js"></script>
    <script src="app.js"></script>
</body>
</html>